import React, { useState, useRef } from 'react';
import ReactDOM from 'react-dom';
import { Card, Switch, Button, Modal, message, Popconfirm, Image, Row, Col } from 'antd'
import AutoTable from '@/components/AutoTable'
import InitForm from '@/components/InitForm'
import { deletearea, district, city, province } from '@/services/basic'
import { connect } from 'umi'
import { PlusOutlined } from '@ant-design/icons'

// type 类型有 table treeselect upload inputnumber datepicker daterange radio select textarea autoinput editor password input 

let defaultFields = {
    "name": {
        "value": null,
        "type": "input",
        "title": "区域",
        "name": [
            "name"
        ],
        "required": true
    },
    "province_id": {
        "value": null,
        "type": "select",
        "title": "省",
        "name": [
            "province_id"
        ],
        "required": true,
        "linked": true,
        "options": {
            "database": province,
            "params": {}
        }
    },
    "city_id": {
        "value": null,
        "type": "select",
        "title": "市",
        "name": [
            "city_id"
        ],
        "required": true,
        "linked": true,
        "belinked": {
            "options": {
                "database": city,
                "params": {
                    "province_id": "linked"
                }
            }
        }
    },
    "district_id": {
        "value": null,
        "type": "select",
        "title": "区",
        "name": [
            "district_id"
        ],
        "required": true,
        "belinked": {
            "options": {
                "database": district,
                "params": {
                    "province_id": "linked",
                    "city_id": "linked"
                }
            }
        }
    },
    "code": {
        "value": null,
        "type": "input",
        "title": "区域编号",
        "name": [
            "code"
        ],
        "required": true
    },
    "address": {
        "value": null,
        "type": "input",
        "title": "经营地址",
        "name": [
            "address"
        ],
        "required": true
    },
    "customer_name": {
        "value": null,
        "type": "input",
        "title": "客服名称",
        "name": [
            "customer_name"
        ],
        "required": true
    },
    "customer_code_url": {
        "value": null,
        "type": "upload",
        "title": "客服二维码",
        "name": [
            "customer_code_url"
        ],
        "required": false,
        "listType": "img",
        "multiple": false,
        "limit": 1
    },
    "account_name": {
        "value": null,
        "type": "input",
        "title": "会计名称",
        "name": [
            "account_name"
        ],
        "required": true
    },
    "account_code_url": {
        "value": null,
        "type": "upload",
        "title": "会计二维码",
        "name": [
            "account_code_url"
        ],
        "required": false,
        "listType": "img",
        "multiple": false,
        "limit": 1
    },
    "accountList": {
        "value": [],
        "type": "checktable",
        "title": "区域收款账户",
        "name": [
            "accountList"
        ],
        "required": false,
        "editable": false,
        "path": "/wbn-api/payment",
        "rowKey": "id",
        "rowName": "name",
        "columns": [
            {
                "title": "支付方式",
                "dataIndex": "name",
                "key": "name",
                "search": false
            },
            {
                "title": "账号",
                "dataIndex": "account",
                "key": "account",
                "search": false
            },
            {
                "title": "账号名称",
                "dataIndex": "account_name",
                "key": "account_name",
                "search": false
            },
            {
                "title": "开户行",
                "dataIndex": "bank",
                "key": "bank",
                "search": false
            },
            {
                "title": "收款码",
                "dataIndex": "origin_url",
                "key": "origin_url",
                "search": false,
                render: (_, record) => {
                    return <Image src={record.origin_url || require("@/assets/default.png")} width={30} height={30}></Image>
                }
            },
            {
                "title": "备注",
                "dataIndex": "remark",
                "key": "remark",
                "search": false
            }],
        col: { span: 24 }
    }
}


function Customertype(props) {
    const [vs, cvs] = useState(false),//表单显/隐
        [fields, cf] = useState(defaultFields),
        [iftype, ciftype] = useState({});

    let actionRef = useRef(), ChildRef = null;
    function reload() {
        actionRef?.current?.reload();
        ChildRef?.onRefresh();
    }

    const columns = [
        {
            "title": "区域",
            "dataIndex": "name",
            "key": "name"
        },
        {
            "title": "省",
            "dataIndex": "province_name",
            "key": "province_name",
        },
        {
            "title": "市",
            "dataIndex": "city_name",
            "key": "city_name",
        },
        {
            "title": "区",
            "dataIndex": "district_name",
            "key": "district_name",
        },
        {
            "title": "区域编码",
            "dataIndex": "code",
            "key": "code",
            search: false,
        },
        {
            "title": "经营地址",
            "dataIndex": "address",
            "key": "address",
            search: false,
        },
        {
            "title": "经营地址",
            "dataIndex": "address",
            "key": "address",
            search: false,
        },
        {
            "title": "客服名称",
            "dataIndex": "customer_name",
            "key": "customer_name",
            "search": false
        },
        {
            "title": "客服二维码",
            "dataIndex": "customer_code_url",
            "key": "customer_code_url",
            "search": false,
            render: (_, record) => {
                return <Image src={record.customer_code_url || require("@/assets/default.png")} width={30} height={30}></Image>
            }
        },
        {
            "title": "会计名称",
            "dataIndex": "account_name",
            "key": "account_name",
            "search": false
        },
        {
            "title": "会计二维码",
            "dataIndex": "account_code_url",
            "key": "account_code_url",
            "search": false,
            render: (_, record) => {
                return <Image src={record.account_code_url || require("@/assets/default.png")} width={30} height={30}></Image>
            }
        },

        {
            "title": "区域收款账户",
            "dataIndex": "accountList",
            "key": "accountList",
            search: false,
            render: (_, row) => {
                return <a onClick={() => {
                    Modal.info({
                        title: "区域收款账户",
                        width: "90%",
                        style: { maxWidth: 800 },
                        maskClosable: true,
                        content: <div style={{ backgroundColor: "#f9f9f9", padding: 12 }}>
                            <AutoTable
                                columns={columnes}
                                actionRef={actionRef}
                                onRef={node => ChildRef = node}
                                dataSource={row.accountList}
                                withCard={false}
                            ></AutoTable>


                        </div>
                    })
                }}>查看</a>
            }
        }
        ,
        {
            title: '操作',
            valueType: 'option',
            width: 100,
            render: (text, record, _, action) => [
                <a
                    style={{ color: "#1890ff" }}
                    onClick={() => {
                        cvs(true);
                        cf(fields => {
                            for (let i in fields) {
                                fields[i].value = record[i];
                                if (i == "accountList") {
                                    fields[i].value = record.accountList.map(it => {
                                        return it.payment_id
                                    });
                                }
                                if (i == "account_code_url" || i == "customer_code_url") {
                                    fields[i].value = record[i] ? {
                                        origin_url: record[i],
                                        preview_url: record[i]
                                    } : null
                                }
                            }
                            return { ...fields }
                        });
                        ciftype({
                            val: "edit",
                            title: "编辑经营区域",
                            id: record.id
                        })
                    }}
                >
                    编辑
                </a>,
                <Popconfirm
                    placement="bottom"
                    title={"确认删除该经营区域？"}
                    onConfirm={() => {
                        deletearea(record.id).then(res => {
                            if (res.code == 0) {
                                message.success("操作成功");
                                reload();
                            }
                        })
                    }}
                    okText="删除"
                    cancelText="取消"
                >
                    <a style={{ color: "#f50" }}>
                        删除
                    </a>
                </Popconfirm>
            ],
        },
    ], columnes = [
        {
            "title": "支付方式",
            "dataIndex": "name",
            "key": "name",
            "search": false
        },
        {
            "title": "账号",
            "dataIndex": "account",
            "key": "account",
            "search": false
        },
        {
            "title": "账号名称",
            "dataIndex": "account_name",
            "key": "account_name",
            "search": false
        },
        {
            "title": "开户行",
            "dataIndex": "bank",
            "key": "bank",
            "search": false
        },
        {
            "title": "收款码",
            "dataIndex": "origin_url",
            "key": "origin_url",
            "search": false,
            render: (_, record) => {
                return <Image src={record.origin_url || require("@/assets/default.png")} width={30} height={30}></Image>
            }
        },
        {
            "title": "备注",
            "dataIndex": "remark",
            "key": "remark",
            "search": false
        },
    ]

    let extrarender = ([
        <div className='action' title='新增' onClick={() => {
            cvs(true);
            cf(fields => {
                for (let i in fields) {
                    fields[i].value = null;
                }
                return { ...fields }
            });
            ciftype({
                val: "add",
                title: "新增经营区域"
            })
        }}>
            <PlusOutlined />
        </div>
    ])


    let saveData = (values) => {
        let { dispatch } = props;
        values.account_code_url = values.account_code_url.origin_url;
        values.customer_code_url = values.customer_code_url.origin_url;
        if (iftype.val == "add") {
            dispatch({
                type: 'basic/addarea',
                payload: values
            }).then(res => {
                if (res.code == 0) {
                    message.success("操作成功");
                    reload();
                    cvs(false)
                }
            })

        } else if (iftype.val == "edit") {
            dispatch({
                type: 'basic/editarea',
                payload: { ...values, id: iftype.id }
            }).then(res => {
                if (res.code == 0) {
                    message.success("操作成功");
                    reload();
                    cvs(false)
                }
            })
        }


    }

    return (
        <div className="pgcontainer">
            <AutoTable
                pagetitle={props.route.name} //页面标题
                pageextra={extrarender} //页面操作 新增or批量删除
                columns={columns}
                actionRef={actionRef}
                onRef={node => ChildRef = node}
                path="/wbn-api/area"
            //withCard={false} 
            //cardtitle = "name" //卡片标题
            //cardavatar = "img_url" //卡片头像
            ></AutoTable>
            <Modal
                maskClosable={false}
                title={iftype.title}
                open={vs}
                onCancel={() => cvs(false)}
                footer={false}
                width={1400}
                destroyOnClose={true}
            >
                <InitForm
                    fields={fields}
                    submitData={(values) => {
                        saveData(values)
                    }}
                    onChange={(changedValues, allValues) => {
                        //联动操作
                    }}
                    submitting={
                        props.loading.effects['basic/addarea'] || !vs
                    }
                >
                </InitForm>


            </Modal>
        </div>
    )
}

export default connect(({ basic, loading }) => ({
    basic,
    loading,
}))(Customertype)